/**
 * @Title: index.js
 * @Description: index 方案创建
 * @author: Fanchao
 * @date: 2020/8/2 12:18 下午
 * @version V1.0
 */
import React, { useState, useEffect } from "react";
import styles from "./index.less";
import SectionTitle from "components/SectionTitle";
import { Button, message, Select, Modal, Input, Form, Tooltip } from "antd";
import { connect, history } from "umi";
import EvaluationDrawer from "@/pages/evaluations/question/components/evaluation-drawer";
import TableForm from "@/pages/evaluations/question/components/table-form";
import storageUtils from "utils/storage";
import EvaluateQuestionDrawer from "@/pages/evaluations/question/components/evaluate-question-drawer";

const { Option } = Select;
const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 }
};
const Question = ({ questions: { evaluatePlanList, questionCategoryList, evaluatePlanIdOption, evaluateQuestionTypeOption, evaluatePlanId, evaluateQuestionType, selectedRowKeys }, dispatch }) => {
    const [visible, setVisible] = useState(false);
    const [params, setParams] = useState({});
    const isAdmin = storageUtils.getUser().userRoleTypes.includes("Admin")||storageUtils.getUser().userRoleTypes.includes("Super_Admin");

    const [form] = Form.useForm();
    useEffect(() => {
        dispatch({
            type: "questions/getEvaluatePlanList",
            payload: {}
        });
        dispatch({
            type: "questions/getQuestionCategoryList",
            payload: {}
        });
        dispatch({
            type: "questions/getQuestionList",
            payload: {
                evaluatePlanId: "",
                questionCategoryName: ""
            }
        });
    }, []);
    const showUpdateDrawer = () => {
        dispatch({
            type: "questions/setEvaluationDrawerVisible",
            payload: true
        });
    };
    const showUpdateDrawer2 = () => {
        dispatch({
            type: "questions/setEvaluateQuestionDrawerVisible",
            payload: true
        });
    };
    const handleOnChange = (value) => {
        dispatch({
            type: "questions/setEvaluatePlanIdOption",
            payload: value
        });
        dispatch({
            type: "questions/getQuestionList",
            payload: {
                evaluatePlanId: value.value,
                questionCategoryName: evaluateQuestionType
            }
        });
    };
    const handleOnChangeX = (value) => {
        dispatch({
            type: "questions/setEvaluateQuestionTypeOption",
            payload: value
        });
        dispatch({
            type: "questions/getQuestionList",
            payload: {
                evaluatePlanId,
                questionCategoryName: value.value
            }
        });
    };
    const addEvaluateExam = () => {
        if (!evaluatePlanIdOption || !evaluateQuestionTypeOption) {
            message.warning("请选择评价等级或者评价类型");
            return;
        }
        setVisible(true);
        const params = {
            evaluatePlanId: evaluatePlanIdOption.value,
            evaluateQuestionIdList: selectedRowKeys,
            questionCategoryName: evaluateQuestionTypeOption.value
        };
        setParams(params);
    };


    return (
        <div className={styles.pageContainer}>
            <div className={styles.titleContainer}>
                <SectionTitle title={"评价问卷"}/>
                {
                    isAdmin ? (
                        <div>
                            <Button type="link" onClick={showUpdateDrawer}>评价等级管理</Button>
                            <Button type="link" onClick={showUpdateDrawer2}>评价类型管理</Button>
                        </div>
                    ) : null
                }
            </div>
            <div className={styles.selectContainer}>
                <div className={styles.selectType}>
                    <label>评价等级:</label>
                    <Select
                        labelInValue
                        value={{ key: evaluatePlanIdOption ? evaluatePlanIdOption.value : "" }}
                        style={{ width: 200 }}
                        onChange={handleOnChange}
                    >
                        {
                            evaluatePlanList.map(item => {
                                return (
                                    <Option
                                        key={item.evaluatePlanId}
                                        value={item.evaluatePlanId}
                                    >
                                        {item.evaluatePlanName}
                                    </Option>
                                );
                            })
                        }
                    </Select>
                </div>
                <div className={styles.selectType}>
                    <label>评价类型:</label>
                    <Select
                        labelInValue
                        value={{ key: evaluateQuestionTypeOption ? evaluateQuestionTypeOption.value : "" }}
                        style={{ width: 220 }}
                        onChange={handleOnChangeX}
                    >
                        {
                            questionCategoryList.map(item => <Option value={item.questionCategoryName}
                                                                     key={item.questionCategoryName}>{item.questionCategoryName}</Option>)
                        }
                    </Select>
                </div>
            </div>
            <div className={styles.tableContainer}>
                <TableForm isAdmin={isAdmin}/>
                {
                    isAdmin ? (
                        <div className={styles.submitButton}>
                            <Tooltip
                                title={() => {
                                    return <div>
                                        <p>创建流程:</p>
                                        <p>1.选择评价等级与评价类型</p>
                                        <p>2.勾选项目</p>
                                        <p>3.创建</p>
                                    </div>;
                                }}
                                placement='right'
                                color={"#105F92"}
                            >
                                <Button
                                    type="primary"
                                    disabled={selectedRowKeys.length === 0 || !evaluatePlanIdOption || !evaluateQuestionTypeOption}
                                    onClick={addEvaluateExam}
                                >
                                    创建方案
                                </Button>
                            </Tooltip>
                        </div>
                    ) : null
                }
            </div>
            <EvaluationDrawer/>
            <EvaluateQuestionDrawer/>
            <Modal
                title="创建试卷"
                visible={visible}
                onOk={() => {
                    form.validateFields().then(values => {
                        const objParams = Object.assign(values, params);
                        dispatch({
                            type: "questions/addEvaluateExam",
                            payload: objParams,
                            callback: (result) => {
                                if (result) {
                                    setVisible(false);
                                    form.resetFields();
                                    setParams({});
                                    dispatch({
                                        type: "questions/setSelectedRowKeys",
                                        payload: []
                                    });
                                    dispatch({
                                        type: "questions/setEvaluatePlanIdOption",
                                        payload: null
                                    });
                                    dispatch({
                                        type: "questions/setEvaluateQuestionTypeOption",
                                        payload: null
                                    });
                                    history.push("/evaluations/examination");
                                }
                            }
                        });
                    }).catch(info => {
                    });
                }}
                onCancel={() => {
                    setVisible(false);
                    form.resetFields();
                }}
            >
                <Form
                    {...layout}
                    layout="horizontal"
                    form={form}
                    name="basic"
                    initialValues={{}}
                >
                    <Form.Item
                        label="问卷名称"
                        name="examName"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <Input placeholder="请输入问卷名称"/>
                    </Form.Item>
                    <Form.Item
                        label="问卷备注"
                        name="comment"
                        rules={[{ required: false, message: "" }]}
                    >
                        <Input.TextArea placeholder="请输入问卷备注"/>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};
export default connect(({ questions, dispatch }) => ({
    questions,
    dispatch
}))(Question);
